<template>
  <div class="home">
    <Header head-title="电话咨询" go-back="true"></Header>

    <el-tabs v-model="activeName" @tab-click="handleClick">
        <el-tab-pane label="全部科室" name="first">
            <section class="HosAll Select" @click="PhoneConDetail()">
                <div class="Doctor">
                    <img src="../../../assets/img/Touxiang.png" alt="">
                </div>
                <div class="fonsMiddle fontC6 JKcon">
                    <h3 class="fonts">刘艳晓 <span class="fontsMin">主治医师 - 妇产科</span> </h3>
                    <p>平顶山市第一人民医院</p>
                    <p>擅长：糖尿病，甲状腺，肾上腺，脑垂体等疾病的诊治，，，脑垂体等疾病的诊治...</p>
                    <div class="Select swiperDate">
                        <section>咨询： <span class="activecolor">123人</span> </section>
                        <section>好评： <span class="activecolor">100%</span> </section>
                    </div>
                    <div class="Select swiperDate">
                        <section class="fontsMin"><span class="activecolor fontsB">￥0</span> ￥19 </section>
                        <section>
                            <el-button type="primary" size="mini">立即预约</el-button>
                        </section>
                    </div>
                </div>
            </section>
            <section class="HosAll Select" @click="PhoneConDetail()">
                <div class="Doctor">
                    <img src="../../../assets/img/Touxiang.png" alt="">
                </div>
                <div class="fonsMiddle fontC6 JKcon">
                    <h3 class="fonts">刘艳晓 <span class="fontsMin">主治医师 - 妇产科</span> </h3>
                    <p>平顶山市第一人民医院</p>
                    <p>擅长：糖尿病，甲状腺，肾上腺，脑垂体等疾病的诊治，，，脑垂体等疾病的诊治...</p>
                    <div class="Select swiperDate">
                        <section>咨询： <span class="activecolor">123人</span> </section>
                        <section>好评： <span class="activecolor">100%</span> </section>
                    </div>
                    <div class="Select swiperDate">
                        <section class="fontsMin"><span class="activecolor fontsB">￥0</span> ￥19 </section>
                        <section>
                            <el-button type="primary" size="mini">立即预约</el-button>
                        </section>
                    </div>
                </div>
            </section>
        </el-tab-pane>
        <el-tab-pane label="内科" name="second">
            <section class="HosAll Select" @click="PhoneConDetail()">
                <div class="Doctor">
                    <img src="../../../assets/img/Touxiang.png" alt="">
                </div>
                <div class="fonsMiddle fontC6 JKcon">
                    <h3 class="fonts">刘艳晓 <span class="fontsMin">主治医师 - 妇产科</span> </h3>
                    <p>平顶山市第一人民医院</p>
                    <p>擅长：糖尿病，甲状腺，肾上腺，脑垂体等疾病的诊治，，，脑垂体等疾病的诊治...</p>
                    <div class="Select swiperDate">
                        <section>咨询： <span class="activecolor">123人</span> </section>
                        <section>好评： <span class="activecolor">100%</span> </section>
                    </div>
                    <div class="Select swiperDate">
                        <section class="fontsMin"><span class="activecolor fontsB">￥0</span> ￥19 </section>
                        <section>
                            <el-button type="primary" size="mini">立即预约</el-button>
                        </section>
                    </div>
                </div>
            </section>
        </el-tab-pane>
        <el-tab-pane label="儿科" name="third">

        </el-tab-pane>
        <el-tab-pane label="皮肤科" name="fourth">

        </el-tab-pane>
        <el-tab-pane label="妇产科" name="five">

        </el-tab-pane>
        <el-tab-pane label="更多" name="six">

        </el-tab-pane>
    </el-tabs>
    <!-- <el-button type="primary" class="Login gotoPay">快速咨询、快速匹配医生</el-button> -->
  </div>
</template>

<script>
import Header from '../../../components/Header'

export default {
  name: 'Home',
  data () {
    return {
      activeName: 'first',
      tabPosition: 'bottom'
    }
  },
  components: {
    Header
  },
  methods: {
    handleClick (tab, event) {
      // console.log(tab, event)
    },
    // 活动规则
    rule () {
      this.$router.push({
        path: '/rule'
      })
    },
    PhoneConDetail () {
      this.$router.push({
        path: '/PhoneConDetail'
      })
    }
  }
}
</script>

<style scoped>
.HosAll {
    padding: 0.2rem;
}
.HosAll .Doctor {
    margin-right: 0.2rem;
}
.HosAll .JKcon {
    flex: 3;
}
</style>
